<script setup lang="ts">
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {addCategoryAPI} from "@/axios/api";

interface use {
  name: string | null
  description: string | null
  remark: string | null
}

const categoryForm = ref<use>({
  name: "",
  description: "",
  remark: ""
})
const formText = {
  categoryName: "分类名称",
  categoryDescription: "分类描述",
  categoryRemark: "备注"
}
const maxlength = {
  categoryName: 10,
  categoryDescription: 250,
  categoryRemark: 250
}

function empty() {
  for (const key in categoryForm.value) {
    categoryForm.value[key] = null
  }
}

function addCategory() {
  if (categoryForm.value.name == null ||
      categoryForm.value.name == "") {
    ElMessage.error("分类名称不能为空")
    return
  }
  addCategoryAPI(categoryForm.value).then(data => {
    ElMessage.success(data.data.data)
    empty()
  })
}

</script>
<template>
  <el-form
      :model="categoryForm"
      label-width="auto"
      style="max-width: 600px"
  >
    <el-form-item
        :label="`${formText.categoryName}:`"
    >
      <el-input
          v-model="categoryForm.name"
          :maxlength="maxlength.categoryName"
          :placeholder="`请输入${formText.categoryName}`"
          show-word-limit
          type="text"
      />
    </el-form-item>

    <el-form-item
        :label="`${formText.categoryDescription}:`"
    >
      <el-input
          v-model="categoryForm.description"
          type="textarea"
          :placeholder="`请输入${formText.categoryDescription}信息`"
          show-word-limit
          :maxlength="maxlength.categoryDescription"
      />
    </el-form-item>

    <el-form-item
        :label="`${formText.categoryRemark}:`"
    >
      <el-input
          v-model="categoryForm.remark"
          type="textarea"
          :placeholder="`请输入${formText.categoryRemark}信息`"
          show-word-limit
          :maxlength="maxlength.categoryRemark"
      />
    </el-form-item>

    <el-form-item
        label=" "
    >
      <el-button
          type="primary"
          @click="addCategory"
      >添加
      </el-button>
      <el-button
          @click="empty"
      >
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>